<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
	</head>
	<body>
		<div style="width: 300px;height: 200px;background-color: red;"></div>
		<input type="button" value="取消"  onclick="cancel()"/>
		
		<script type="text/javascript">
			window.onload = function() {
				var myDiv = document.getElementsByTagName("div")[0];
				// event:事件 listener：监听
				myDiv.addEventListener("click", function() {
					//myDiv.style.backgroundColor = "yellow";
					// this代表当前myDiv对象
					this.style.backgroundColor = "yellow";
				});
				myDiv.addEventListener("click", function() {
					myDiv.style.height = "400px";
				});
				myDiv.addEventListener("mouseenter", mouseenter1);
				myDiv.addEventListener("mouseenter", mouseenter2);
				myDiv.addEventListener("mouseenter", mouseenter3);
			}
			
			function mouseenter1() {
				console.log("mouseenter1")
			}
			
			function mouseenter2() {
				console.log("mouseenter2")
			}
			
			function mouseenter3() {
				console.log("mouseenter3")
			}
			
			function cancel() {
				var myDiv = document.getElementsByTagName("div")[0];
				myDiv.removeEventListener("mouseenter", mouseenter1);
				myDiv.removeEventListener("mouseenter", mouseenter2);
			}
		</script>
	</body>
</html>
